<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/swiper.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 头部开始 -->
  <div class="header">
    <div class="wrapper clearfix">
      <a href="#" class="logo"></a>
      <div class="right">
        <ul class="top clearfix">
          <li>
            <a href="#">amigo账号登录</a>
          </li>
          <li class="spacer"></li>
          <li>
            <a href="#">原账号登录</a>
          </li>
          <li class="spacer"></li>
          <li>
            <a href="#">注册</a>
          </li>
          <li class="cart">
            <a href="#">购物车（0）</a>
          </li>
        </ul>
        <div class="bottom clearfix">
          <ul class="nav clearfix">
            <li>
              <a href="#">首页</a>
            </li>
            <li>
              <a href="#">手机</a>
            </li>
            <li>
              <a href="#">配件</a>
            </li>
            <li>
              <a href="#">服务</a>
            </li>
            <li>
              <a href="#">下载</a>
            </li>
            <li>
              <a href="#">社区</a>
            </li>
            <li>
              <a href="#">amigoOS</a>
            </li>
          </ul>
          <form class="search clearfix">
            <input type="text" placeholder="输入搜索内容"> 
            <button></button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="kb"></div>
  <!-- 头部结束 -->
  <!-- 轮播图开始 -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide1"></div>
      <div class="swiper-slide slide2"></div>
      <div class="swiper-slide slide3"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
  <!-- 轮播图结束 -->
  <!-- 明星产品开始 -->
  <div class="superstar">
    <div class="wrapper">
      <h2>明星产品</h2>
      <ul class="clearfix">
        <li>
          <a href="#">
            <img src="./images/sp_1.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/sp_2.jpg" alt="">
          </a>
        </li>
        <li class="last">
          <a href="#">
            <img src="./images/sp_3.jpg" alt="">
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 明星产品结束 -->
  <!-- 热卖推荐开始 -->
  <div class="hot">
    <div class="wrapper">
      <h2>热卖推荐</h2>
      <div class="more">
        <a href="#" class="more">...更多...</a>
      </div>
      <div class="clearfix">
        <div class="left">
          <a href="#">
            <img src="./images/hr_0.jpg" alt="">
          </a>
        </div>
        <ul class="right clearfix">
          <li>
            <a href="#">
              <img src="./images/hr_1.jpg" alt="">
              <div class="content">
                <h3 class="title">金立F5</h3>
                <p class="desc">4000mAh大电池，5.3英寸大屏</p>
                <p class="price"><span>￥</span> 1599</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/hr_2.jpg" alt="">
              <div class="content">
                <h3 class="title">金立S9</h3>
                <p class="desc">后置1300万像素+500万像素双摄</p>
                <p class="price"><span>￥</span> 2499</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/hr_3.jpg" alt="">
              <div class="content">
                <h3 class="title">金立S10C</h3>
                <p class="desc">1600万柔光自拍更美</p>
                <p class="price"><span>￥</span> 1599</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/hr_4.jpg" alt="">
              <div class="content">
                <h3 class="title">金立M6</h3>
                <p class="desc">5000mAh电池、5.5英寸奥魔丽屏</p>
                <p class="price"><span>￥</span> 2699</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/hr_5.jpg" alt="">
              <div class="content">
                <h3 class="title">金钢2D</h3>
                <p class="desc">4000mAh电池，全网通，3GB运存</p>
                <p class="price"><span>￥</span> 1299</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./images/hr_6.jpg" alt="">
              <div class="content">
                <h3 class="title">W909</h3>
                <p class="desc">双屏翻盖，4GB+64GB</p>
                <p class="price"><span>￥</span> 3999</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 热卖推荐结束 -->
  <!-- 精美配件开始 -->
  <div class="parts">
    <div class="wrapper">
      <h2>精美配件</h2>
      <div class="more">
        <a href="#" class="more">...更多...</a>
      </div>
      <ul class="clearfix">
        <li>
          <a href="#">
            <img src="./images/jl-23.jpg" alt="">
            <div class="content">
              <h3 class="title">线控自拍杆</h3>
              <p class="desc">迷你携带，线控美拍</p>
              <p class="price"><span>￥</span>49</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/jl-24.jpg" alt="">
            <div class="content">
              <h3 class="title">Micro USB数据线</h3>
              <p class="desc">高速数据传输</p>
              <p class="price"><span>￥</span>69</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/jl-25.jpg" alt="">
            <div class="content">
              <h3 class="title">旅行充电器</h3>
              <p class="desc">流线腰身，高效充电</p>
              <p class="price"><span>￥</span> 3999</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/jl-26.jpg" alt="">
            <div class="content">
              <h3 class="title">快充充电器</h3>
              <p class="desc">高速快充，安全节能</p>
              <p class="price"><span>￥</span> 3999</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/jl-27.jpg" alt="">
            <div class="content">
              <h3 class="title">HiFi耳机</h3>
              <p class="desc">HI-FI魔音，震撼享受</p>
              <p class="price"><span>￥</span> 3999</p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/jl-28.jpg" alt="">
            <div class="content">
              <h3 class="title">贴膜</h3>
              <p class="desc">高清透光，耐磨防油污</p>
              <p class="price"><span>￥</span> 3999</p>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 精美配件结束 -->
  <!-- 品牌动态开始 -->
  <div class="brand">
    <div class="wrapper">
      <h2>品牌动态</h2>
      <ul class="clearfix">
        <li>
          <a href="#">
            <img src="./images/brand_1.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/brand_2.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/brand_3.jpg" alt="">
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 品牌动态结束 -->
  <!-- 底部区域开始 -->
  <div class="footer">
    <!-- 服务开始 -->
    <div class="service">
      <ul class="clearfix">
        <li>
          <a href="#">
            <p>7天</p>
            <p>退货保障</p>
          </a>
        </li>
        <li>
          <a href="#">
            <p>30天</p>
            <p>换货承诺</p>
          </a>
        </li>
        <li>
          <a href="#">
            <p>99元起</p>
            <p>全场免运费</p>
          </a>
        </li>
        <li>
          <a href="#">
            <p>579家</p>
            <p>售后服务点</p>
          </a>
        </li>
      </ul>
    </div>
    <!-- 服务结束 -->
    <!-- 帮助区域开始 -->
    <div class="help">
      <div class="wrapper clearfix">
        <div class="left clearfix">
          <dl>
            <dt>关于金立</dt>
            <dd>
              <a href="#">企业荣誉</a>
            </dd>
            <dd>
              <a href="#">金立体验店</a>
            </dd>
            <dd>
              <a href="#">代理商专区</a>
            </dd>
            <dd>
              <a href="#">加入金立</a>
            </dd>
            <dd>
              <a href="#">联系我们</a>
            </dd>
            <dd>
              <a href="#">供应/服务商需求咨询</a>
            </dd>
          </dl>
          <dl>
            <dt>新闻资讯</dt>
            <dd>
              <a href="#">公司新闻</a>
            </dd>
            <dd>
              <a href="#">媒体报道</a>
            </dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd>
              <a href="#">购物流程</a>
            </dd>
            <dd>
              <a href="#">支付方式</a>
            </dd>
            <dd>
              <a href="#">配送说明及费用</a>
            </dd>
            <dd>
              <a href="#">订单管理</a>
            </dd>
            <dd>
              <a href="#">购买常见问题</a>
            </dd>
          </dl>
          <dl>
            <dt>售后服务</dt>
            <dd>
              <a href="#">售后政策</a>
            </dd>
            <dd>
              <a href="#">售后服务网点</a>
            </dd>
            <dd>
              <a href="#">上门维修</a>
            </dd>
            <dd>
              <a href="#">签收须知</a>
            </dd>
            <dd>
              <a href="#">物流查询</a>
            </dd>
          </dl>
          <dl>
            <dt>关注我们</dt>
            <dd>
              <a href="#" class="weibo"><i></i><span>新浪微博</span></a>
            </dd>
            <dd>
              <a href="#" class="tenxun"><i></i><span>腾讯微博</span></a>
            </dd>
            <dd>
              <a href="#" class="qq"><i></i><span>QQ空间</span></a>
            </dd>
          </dl>
        </div>
        <div class="right">
          <div class="code"></div>
          <p>扫一扫关注二维码</p>
        </div>
      </div>
    </div>
    <!-- 帮助区域结束 -->
    <!-- 版权信息开始 -->
    <div class="copyright">
      <div class="wrapper">
        <p>
          <a href="#">网站地图</a>
          <a href="#">集团下属公司</a>
        </p>
        <p>
          <span>增值电信业务经营许可证：</span>
          <a href="#">粤B2-20120350</a>
          <a href="#">粤ICP备05087105号</a>
          <a href="#">粤网文[2013]029-029号</a>
          <a href="#">粤文市审[2012]196号</a>
          <img src="./images/b.png" alt="">
          <img src="./images/sf.png" alt="">
        </p>
        <p>
          Copyright © 2013 深圳市金立通信设备有限公司 版权所有 .
        </p>
      </div>
    </div>
    <!-- 版权信息结束 -->
  </div>
  <!-- 底部区域结束 -->
  <!-- 侧边固定区域开始 -->
  <ul class="fixedTool">
    <li>
      在线服务
    </li>
    <li>
      帮助中心
    </li>
    <li id="goTop">
      回到顶部
    </li>
    <li>
      尽力关怀
    </li>
  </ul>
  <!-- 侧边固定区域结束 -->
  <script src="./js/jquery.js"></script>
  <script src="./js/swiper.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
      $('#goTop').on("click",function(){
        
      })
  </script>
</body>
</html>